<template>
  <div class="button-set-detail-box">
    <template v-if="nowItem">
      <div class="button-set-detail-type-change-box">
        <div class="button-set-detail-type-change-item overHideCon-1" :class="[nowIsBase ? 'is-checked' : '']" @click="nowType = 0">{{ $t('common.base.baseSet') }}</div>
        <div class="button-set-detail-type-change-item overHideCon-1" :class="[nowIsConnect ? 'is-checked' : '']" @click="nowType = 1">{{ $t('setting.buttonSet.text13') }}</div>
      </div>
      <div class="flex-1">
        <ButtonSetDetailSetBaseSet ref="buttonSetDetailSetBaseSetDom" v-show="nowIsBase" :now-item="nowItem"></ButtonSetDetailSetBaseSet>
        <ButtonSetDetailSetEventSet ref="ButtonSetDetailSetEventSet" v-show="nowIsConnect" :now-item="nowItem" @changeTrigger="changeTrigger" @changeLinker="changeLinker" @changeCode="changeCode" @changeBtnListEventType="changeBtnListEventType" :mode="mode"></ButtonSetDetailSetEventSet>
      </div>
    </template>
  </div>
</template>
<script>
import { defineComponent, ref, computed, watch, nextTick } from 'vue';
import ButtonSetDetailSetBaseSet from 'src/component/compomentV2/buttonSet/components/detailSet/baseSet.vue';
import ButtonSetDetailSetEventSet from '@src/component/compomentV2/buttonSet/components/detailSet/eventSet.vue';
import { ButtonSetDetailModuleEnum } from 'pub-bbx-global/pageType/dist/enum/ButtonSetEnum'
export default defineComponent({
  name: 'ButtonSetDetailSet',
  components: {
    ButtonSetDetailSetBaseSet,
    ButtonSetDetailSetEventSet,
  },
  props: {
    nowItem: {
      type: [Object, null],
      default: null,
    },
    mode: {
      type: String,
      default: '',
    },
  },
  setup(props, {emit}) {
    const buttonSetDetailSetBaseSetDom = ref(null);
    const ButtonSetDetailSetEventSet = ref(null);
    const nowType = ref(0);
    const nowIsBase = computed(() => nowType.value === 0);
    const nowIsConnect = computed(() => nowType.value === 1);

    function initComData() {
      nowType.value = 0;
    }
    async function validate() {
      let res1 = await buttonSetDetailSetBaseSetDom.value.validate();
      
      if (!res1) {
        nowType.value = 0;
        
        return Promise.resolve(false);
      }
      let res2 = await ButtonSetDetailSetEventSet.value.validate();
      if (!res2) {
        nowType.value = 1;
        return Promise.resolve(false);
      }
      return Promise.resolve(true);
    }
    function changeTrigger(val){
      emit('changeTrigger', val)
    }
    function changeLinker(val){
      emit('changeLinker', val)
    }
    function changeCode(val){
      emit('changeCode', val)
    }
    function changeBtnListEventType(val){
      emit('changeBtnListEventType', val)
    }
    function showAndValidate(moduleName){
      console.log(moduleName, '<----moduleName')
      if(moduleName === ButtonSetDetailModuleEnum.Event){
        nextTick(()=>{
          nowType.value = 1
          ButtonSetDetailSetEventSet.value.validate()
        })
      }else if(moduleName === ButtonSetDetailModuleEnum.Base){
        nextTick(()=>{
          nowType.value = 0
          buttonSetDetailSetBaseSetDom.value.validate()
        })
      }
    }
    initComData();
    return {
      nowType,
      nowIsBase,
      nowIsConnect,
      buttonSetDetailSetBaseSetDom,
      ButtonSetDetailSetEventSet,
      validate,
      changeTrigger,
      changeLinker,
      changeCode,
      changeBtnListEventType,
      showAndValidate,
      initComData,
    };
  },
});
</script>
<style lang="scss" scoped>
.button-set-detail-box {
  width: 320px;
  display: flex;
  flex-direction: column;
  .button-set-detail-type-change-box {
    display: flex;
    .button-set-detail-type-change-item {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      border-bottom: 2px solid #f5f5f5;
      cursor: pointer;
      &.is-checked {
        border-bottom: 2px solid $color-primary;
        color: $color-primary;
      }
    }
  }
}
</style>
